<template>
	<view>
		<!-- 示例 -->
		<Ytitle value='示例 (填写表单)' pieceColor='#007AFF'></Ytitle>
		<YinputList :config="config" :data.sync='data' @customize='customize'></YinputList>

		<!-- JSON -->
		<Ytitle value='JSON (数据跟随表单变化)' pieceColor='#007AFF'></Ytitle>
		<code>
			<pre>{{initCode(data)}}</pre>
		</code>
		<!-- 配置 -->
		<Ytitle value='配置文件' pieceColor='#007AFF'></Ytitle>
		<code>
			<pre>{{initCode(config)}}</pre>
		</code>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				config: [{
						title: '姓名',
						key: 'username'
					},
					{
						key: 'sex',
						// 字段
						title: '性别',
						// 标题
						items: {
							// items 单选功能 单选列表
							0: '男',
							// 单选项 key: value
							1: '女',
						}
					},
					{
						title: '地址',
						key: 'address'
					},
					{
						title: '签名',
						key: 'info'
					},
					{
						key: 'date',
						title: '出生日期',
						customize: true,
						customize_info: '点击选择日期',
					},
					{
						key: 'verified',
						title: '实名认证',
						customize: true,
						customize_info: '点击实名认证',
					},
				],
				data: {}
			}
		},
		methods: {
			customize(info){
				if(info.key == 'date'){
					this.$set(this.data,info.key,'2020-10-10')
					return
				}
				uni.showToast({
					title:`你点击了${info.customize_info}`,
					icon:'none'
				})	
			},
			initCode(data) {
				return JSON.stringify(data, null, 2)
			}
		}
	}
</script>

<style>
	
</style>
